<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>搜索页面</title>
	</head>
	<body>
	<!--导航-->
	<nav th:replace="_fragments :: menu(1)">

	</nav>
		<!--中间内容--->
		<div class="m-padded-tb-big m-container-small">
         <div class="ui container">
         	<!----header--->
					<div class="ui top attached segment">
						<div class="ui middle aligned two column grid">
							<div class="column">
								<h3 class="ui teal header">搜索结果</h3>
							</div>
							<div class=" right aligned column">
								共<h2 class="ui orange header m-inline-block m-text-thin" th:text="${page.totalElements}"> 14 </h2>篇
							</div>
						</div>
					</div>

             	<div class="ui top attached  segment" >
					<div class="ui padded vertical segment m-padded-tb-large" th:each="blog : ${page.content}">
						<div class="ui middle  aligned  mobile reversed stackable grid">
							<div class="eleven wide column">
								<h3 class="ui header"><a href="#" class="m-black" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank"  th:text="${blog.title}">你真的理解什么是财富自由吗?</a></h3>
								<p class="m-text" th:text="|${blog.description}......|"> 正 确 做好任何一件事情的前提是清晰   、  正确的理解目标      。    而事实事,我们很多人根本没有对目标正确定义   ,   甚   至  根本从来没有想过,只是大家都那么做而已....</p>
								<div class="ui stackable grid">
									<div class="eleven wide column">
										<div class="ui mini horizontal link list">
											<div class="item">
												<img src="https://unsplash.it/100/100?image=1005" th:src="@{${blog.user.avatar}}" class="ui avatar image" alt="">
												<div class="content"><a href="#" class="header" th:text="${blog.user.nickname}">侯泽宇</a></div>
											</div>
											<div class="item">
												<i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2017-11-05</span>
											</div>
											<div class="item">
												<i class="eye icon"></i><span th:text="${blog.views}">1234</span>
											</div>
										</div>
									</div>
									<div class="right aligned five wide column">
										<a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin" th:text="${blog.type.name}">认识升级</a>
									</div>
								</div>
							</div>
							<div class="five wide column">
								<a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
									<img src="https://unsplash.it/800/450?image=1005" th:src="@{${blog.firstPicture}}" class="ui rounded image" alt="">
								</a>
							</div>
						</div>
					</div>
             	</div>
			 <!--footer-->
			 <div class="ui bottom attached segment" th:if="${page.totalPages}>1" >
				 <div class="ui middle aligned two column grid">
					 <div class="column">
						 <a href="#" th:href="@{/(page=${page.number}-1)}" class="ui mini teal basic button" th:unless="${page.first}">上一页</a>
					 </div>
					 <div class=" right aligned column">
						 <a href="#"  th:href="@{/(page=${page.number}+1)}" class="ui mini teal basic button" th:unless="${page.last}">下一页</a>
					 </div>
				 </div>
			 </div>

             </div>
         </div>
		<!--底部footer--->
	 <footer th:replace="_fragments :: footer" >

	</footer>
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
		<script type="text/javascript">
			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			});
		</script>
	</body>
</html>
